<template>
  <div style="width: 100%">
    <el-form
      ref="form"
      :disabled="disabled"
      :model="formDataAll"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="上级部门" prop="parentId">
            <treeselect
              :check-strictly="true"
              :normalizer="normalizer"
               :disabled="disabled"
              :options="departmentList"
              :props="{ label: 'nameCn', id: 'pid' }"
              v-model="formDataAll.parentId"
            >
              <div slot="value-label" slot-scope="{ node }">
                {{ node.raw && node.raw.nameCn }}
              </div>
            </treeselect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门编码" prop="name">
            <el-input v-model="formDataAll.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="nameCn">
            <el-input v-model="formDataAll.nameCn"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="formDataAll.sort"></el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <div class="md-component-btns">
      <el-button size="medium" :disabled="disabled" type="primary" @click="save"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/departmentManage/departmentManage";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "departmentManageTemp",
  components: { Treeselect },
  data() {
    return {
      dialogType: "add",
      currentData: {},
      departmentList: [],
      formDataAll: {
        name: "",
        nameCn: "",
        parentId: "",
        // sort: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入部门编码", trigger: "blur" }],
        nameCn: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
        // sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        // parentId: [
        //   { required: true, message: "请选择上级部门", trigger: "blur" },
        // ],
      },
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    normalizer(node) {
      return {
        id: node.pid,
        label: node.nameCn,
        children: node.children,
      };
    },
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          const paramData = {
            ...this.formDataAll,
          };
          // let form = this.deepCopy(this.formDataAll);
          if (this.dialogType === "add") delete paramData.pid;
          let method = this.dialogType === "add" ? "insertDept" : "updateDept";
          let msg = this.dialogType === "add" ? "新增" : "编辑";
          api[method](paramData).then(() => {
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          });
        }
      });
    },
    getFilterData(data) {
      const newData = data.map((v) => {
        if (v.children && v.children.length === 0) {
          const noChild = { ...v };
          delete noChild.children;
          return {
            ...noChild,
          };
        }
        return {
          ...v,
          children: this.getFilterData(v.children),
        };
      });
      return newData;
    },
    getList() {
      api.getList().then((res) => {
        const newData = res.data.data;
        const newData2 =  newData.map((v) => ({
          ...v,
          disabled: this.dialogType === "view",
        }));
        this.departmentList = this.getFilterData(newData2)
      });
    },
    open(row) {
      this.dialogType = "add";
      this.formDataAll = { ...row };
      this.getList();
    },
    edit(row) {
      this.dialogType = "edit";
      this.getDetails(row.pid);
      this.getList();
      this.currentData = { ...row };
    },
    view(row) {
      this.dialogType = "view";
      this.getDetails(row.pid);
      this.getList();
      this.currentData = { ...row };
    },
    getDetails(pid) {
      api.detail({ id: pid }).then((res) => {
        const newData = res.data.data;
        this.formDataAll = { ...newData };
      });
    },
  },
};
</script>
